<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />

		<style type="text/css">
			.viewpagerImg {
				height: 150px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<!--
            	作者：460575807@qq.com
            	时间：2017-07-12
            	描述：轮播
            -->
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img class="viewpagerImg" src="http://img3.imgtn.bdimg.com/it/u=2314296108,3621616129&fm=26&gp=0.jpg">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img class="viewpagerImg" src="http://img2.imgtn.bdimg.com/it/u=1314955474,2728725832&fm=26&gp=0.jpg">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img class="viewpagerImg" src="http://img5.imgtn.bdimg.com/it/u=3669004955,3090616900&fm=26&gp=0.jpg">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img class="viewpagerImg" src="http://img2.imgtn.bdimg.com/it/u=2022585162,1789797020&fm=26&gp=0.jpg">
						</a>
					</div>
					<!-- 第四张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img class="viewpagerImg" src="http://img3.imgtn.bdimg.com/it/u=2314296108,3621616129&fm=26&gp=0.jpg">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img class="viewpagerImg" src="http://img2.imgtn.bdimg.com/it/u=1314955474,2728725832&fm=26&gp=0.jpg">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>

			<!--
				作者：460575807@qq.com
				时间：2017-07-12
				描述： grid 功能
			-->
			<ul class="mui-table-view mui-grid-view">
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img style="width: 64px;height: 64px;" class="mui-media-object" src="icon/a1.png">
						<div class="mui-media-body">优惠超市</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img style="width: 64px;height: 64px;" class="mui-media-object" src="icon/a2.png">
						<div class="mui-media-body">全球购</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#"><img style="width: 64px;height: 64px;" class="mui-media-object" src="icon/a3.png">
						<div class="mui-media-body">服装城</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img style="width: 64px;height: 64px;" class="mui-media-object" src="icon/a4.png">
						<div class="mui-media-body">水果生鲜</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img style="width: 64px;height: 64px;" class="mui-media-object" src="icon/a5.png">
						<div class="mui-media-body">充值缴费</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img style="width: 64px;height: 64px;" class="mui-media-object" src="icon/a6.png">
						<div class="mui-media-body">领卷</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img style="width: 64px;height: 64px;" class="mui-media-object" src="icon/a7.png">
						<div class="mui-media-body">物流查询</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3">
					<a href="#">
						<img style="width: 64px;height: 64px;" class="mui-media-object" src="icon/a8.png">
						<div class="mui-media-body">英雄联盟</div>
					</a>
				</li>
			</ul>

			<!--
            	作者：460575807@qq.com
            	时间：2017-07-12
            	描述：横向
            -->
			<div style="margin-top: 5px;background: #FFFFFF;padding-top: 5px;padding-bottom: 5px;">
				<span style="font-size: 14px;padding: 12px;margin-bottom: 5px;">极品秒杀价</span>
				<div style="background:#FFFFFF;height: 86px;padding-left: 5px;padding-right: 5px;" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<div class="mui-control-item" id="item" style="background: #999999;padding-left: 0px;padding-right: 0px;">
							<a href="d">
								<img height="86" width="86px" src="http://img4.imgtn.bdimg.com/it/u=2543125154,2406886686&fm=26&gp=0.jpg" />
							</a>
						</div>

						<div class="mui-control-item" id="item" style="background: #999999;padding-left: 0px;padding-right: 0px;">
							<a href="d">
								<img height="86" width="86px" src="http://img3.imgtn.bdimg.com/it/u=3794212542,4202076781&fm=26&gp=0.jpg" />
							</a>
						</div>

						<div class="mui-control-item" id="item" style="background: #999999;padding-left: 0px;padding-right: 0px;">
							<a href="d">
								<img height="86" width="86px" src="http://img5.imgtn.bdimg.com/it/u=4072353857,2234721694&fm=26&gp=0.jpg" />
							</a>
						</div>

						<div class="mui-control-item" id="item" style="background: #999999;padding-left: 0px;padding-right: 0px;">
							<a href="d">
								<img height="86" width="86px" src="http://img5.imgtn.bdimg.com/it/u=2072170238,3162336655&fm=26&gp=0.jpg" />
							</a>
						</div>

						<div class="mui-control-item" id="item" style="background: #999999;padding-left: 0px;padding-right: 0px;">
							<a href="d">
								<img height="86" width="86px" src="http://img0.imgtn.bdimg.com/it/u=2661626818,3130737798&fm=26&gp=0.jpg" />
							</a>
						</div>

						<div class="mui-control-item" id="item" style="background: #999999;padding-left: 0px;padding-right: 0px;">
							<a href="d">
								<img height="86" width="86px" src="http://img3.imgtn.bdimg.com/it/u=1103834040,1218297507&fm=26&gp=0.jpg" />
							</a>
						</div>

						<div class="mui-control-item" id="item" style="background: #999999;padding-left: 0px;padding-right: 0px;">
							<a href="d">
								<img height="86" width="86px" src="http://img5.imgtn.bdimg.com/it/u=2967831462,554352221&fm=26&gp=0.jpg" />
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init();

			var slider = mui("#slider");
			slider.slider({
				interval: 5000
			});
		</script>
	</body>

</html>